<%@ page import="com.atguigu.service.impl.ServiceServiceImpl" %>
<%@ page import="com.atguigu.service.ServiceService" %>
<%@ page import="com.atguigu.service.ServerService" %>
<%@ page import="com.atguigu.service.impl.ServerServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>

<c:if test="${!empty server}">
    <title>${server.name}${server.name}的container</title>
</c:if>
<c:if test="${empty server}">
    <title>全部docker的container</title>
</c:if>

<div class="container-fluid "> <!--table行-->

    <div class="container-fluid ">
    <h1 class="text-center">
        <c:if test="${!empty server}">
            <span class="uppercase">${server.name}/</span> container页面:<span class="red">容器</span>&nbsp&nbsp(空闲端口号:${server.freePorts})</h1>
        </c:if>
        <c:if test="${empty server}">
            <span class="uppercase">全部/server </span> container配置页面:<span class="red">容器</span></h1>
        </c:if>

    <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 docker" style="table-layout:inherit">
        <thead class="thead">
        <tr>
            <th><input type="checkbox"> 全选</th>
            <th class="col-md-1 ">编号</th>
            <th class="">宿主机</th>
            <th class="">名称</th>
            <th class="col-md-1">系统版本</th>
            <th class="">cpu/memory</th>
            <th class="">disk</th>
            <th class="">ip</th>
            <th class="">ports</th>
            <th class="">use</th>
            <th class="">endTime</th>
            <th class=" text-center">操作
            </th>
        </tr>
        </thead>
            <tbody>
            <% Integer count=1;%>
            <c:forEach items="${requestScope.containers}" var="container" varStatus="containerStatus">
                <tr class="tr" containerId="${container.id}">
                    <td class="number">
                        <input type="checkbox">
                        <span class="count"><%=count++%></span>
                    </td>
                    <td class="id">${container.id}</td>
                    <td class="">
                        <select class="form-control masterId">
                            <option value="default">请选择服务器</option>
                            <c:forEach items="${requestScope.servers}" var="server">
                                <option value="${server.id}"
                                        <c:if test="${container.masterId == server.id}">
                                            selected
                                        </c:if>
                                >${server.name}</option>
                            </c:forEach>
                        </select>
                        <%--这是渲染阶段--%>
                    </td>
                    <td class="">
                        <input value="${container.name}" class="form-control name" placeholder="如:jining4.0" type="text">
                    </td>
                    <td class="">
                        <input value="${container.systemVersion}" class="form-control systemVersion" placeholder="如:lhwl4.0:mysql-proxy" type="text">
                    </td>
                    <td class="">
                        <input value="${container.cpu}/${container.memory}" class="form-control cpuMemory" placeholder="如:4/8" type="text">
                    </td>
                    <td class="">
                        <input value="${container.disk}" class="form-control disk" placeholder="如:500" type="text">
                    </td>
                    <td class="">
                        <input value="${container.ip}" class="form-control ip" placeholder="如:1.1.1.1/24" type="text">
                    </td>
                    <td class="">
                        <input value="${container.ports}" class="form-control ports" placeholder="如:80:80,81:3306" type="text">
                    </td>
                    <td class="">
                        <input value="${container.use}" class="form-control use" placeholder="如:jining4.0" type="text">
                    </td>
                    <td class="">
                        <input value="${container.endTime}" class="form-control endTime" placeholder="如:2021-04-13" type="text">
                    </td>
                    <td class="detail text-center">
                        <div class="btn-group">
                            <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-arrow-right appendix hand"></div>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            <tr class="tr">
                <td class="number">
                    <input type="checkbox">
                    <span class="count"><%=count++%></span>
                </td>
                <td class="id createSign">无</td>
                <td class="">
                    <select class="form-control masterId">
                        <option value="default">请选择服务器</option>
                        <c:forEach items="${requestScope.servers}" var="server">
                            <option value="${server.id}">${server.name}</option>
                        </c:forEach>
                    </select>
                </td>
                <td class="">
                    <input class="form-control name" placeholder="如:jining4.0" type="text">
                </td>
                <td class="">
                    <input class="form-control systemVersion" placeholder="如:lhwl4.0:mysql-proxy" type="text">
                </td>
                <td class="">
                    <input class="form-control cpuMemory" placeholder="如:4/8" type="text">
                </td>
                <td class="">
                    <input class="form-control disk" placeholder="如:500" type="text">
                </td>
                <td class="">
                    <input class="form-control ip" placeholder="如:1.1.1.1/24" type="text">
                </td>
                <td class="">
                    <input class="form-control ports" placeholder="如:80:80,81:3306" type="text">
                </td>
                <td class="">
                    <input class="form-control use" placeholder="如:jining4.0" type="text">
                </td>
                <td class="">
                    <input class="form-control endTime" placeholder="如:2021-04-13" type="text">
                </td>
                <td class="detail text-center col-lg-1">
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-arrow-right appendix hand"></div>
                    </div>
                </td>
            </tr>
            </tbody>
    </table><!--容器区-->
</div>
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
        <!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
        <!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea  创建 定义 配置 (详细配置 生成服务)</p>
</div>
<!--table行-->
</body>
<script>
    (function (original) {
        jQuery.fn.clone = function () {
            var result           = original.apply(this, arguments),
                my_textareas     = this.find('textarea').add(this.filter('textarea')),
                result_textareas = result.find('textarea').add(result.filter('textarea')),
                my_selects       = this.find('select').add(this.filter('select')),
                result_selects   = result.find('select').add(result.filter('select'));

            for (var i = 0, l = my_textareas.length; i < l; ++i) $(result_textareas[i]).val($(my_textareas[i]).val());
            for (var i = 0, l = my_selects.length;   i < l; ++i) {
                for (var j = 0, m = my_selects[i].options.length; j < m; ++j) {
                    if (my_selects[i].options[j].selected === true) {
                        result_selects[i].options[j].selected = true;
                    }
                }
            }
            return result;
        };
    }) (jQuery.fn.clone);
    $("table").click(function (event) {//detail 操作模块的点击事件,利用冒泡
        let eventTarget = $(event.target);
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        if (eventTarget.hasClass('update')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            console.log(1)
            //let eventTarget = $('.yaotijiaodedian')
            let trObjData = {};
            if(table.hasClass("docker")){
                let idObj=trObj.find(".id");
                if(idObj.hasClass("createSign")){//有新增标志
                    trObjData["id"]=null;idObj.removeClass("createSign")
                }else{//没有新增标识,表示update,需要从单元格中获取container Id
                    trObjData["id"]=idObj.html();
                }
                trObjData["serviceId"]=trObj.find(".serviceId:first").val();
                trObjData["name"]=trObj.find(".name:first").val();
                trObjData["systemVersion"]=trObj.find(".systemVersion:first").val();
                trObjData["cpuMemory"]=trObj.find(".cpuMemory:first").val();
                trObjData["disk"]=trObj.find(".disk:first").val();
                trObjData["ip"]=trObj.find(".ip:first").val();
                trObjData["ports"]=trObj.find(".ports:first").val();
                trObjData["use"]=trObj.find(".use:first").val();
                trObjData["endTime"]=trObj.find(".endTime:first").val();
                trObjData["masterId"]=trObj.find(".masterId:first").val();
                let newTrObj=trObj.clone();newTrObj.find(".count").html(parseInt(newTrObj.find(".count").html())+1);newTrObj.find(".id").addClass("createSign")
                //console.log(trObjData);return
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>serverServlet?action=ajaxConfigContainer&configType=docker",
                    data: trObjData,
                    success: function (response, status, xhr) {
                        console.log("收到回信");                    console.log(response);
                        let jsonObj=JSON.parse(response);
                        alert(jsonObj.status);trObj.attr("containerId",jsonObj.id);idObj.html(jsonObj.id);

                        table.append(newTrObj)
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })//ajax
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('delete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            let table=eventTarget.closest("table");
            let trObj=eventTarget.closest(".tr");
            //console.log(trObj.find(".id:first").text())
            if(table.hasClass("docker")){
                $.ajax({
                    type: "post",
                    url: "<%=basepath%>serverServlet?action=deleteContainer&serverId=${server.id}&delete=true&configType=docker",
                    data: {"id": trObj.find(".id:first").text()},
                    success: function (response, status, xhr) {
                        console.log("收到回信")
                        console.log(response)
                        if (response == "删除成功") {
                            alert("删除成功")
                            trObj.remove()
                        } else {
                            alert("删除失败");
                        }
                    },
                    timeout: 10000, //如果超时1000毫秒，就结束
                    error: function (xhr, errorText, errorType) { //错误后的行为
                        console.log("回信异常")
                        console.log("errorText:" + errorText); //error
                        console.log("errorType:" + errorType); //not found
                        console.log("xhr.status:" + xhr.status); //404
                        console.log("xhr.statusText:" + xhr.statusText); //not found
                    },
                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                })//ajax
            }

        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
        if (eventTarget.hasClass('appendix')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            let containerId=$(trObj).find(".id").html();
            let data={"containerId":containerId,}
            if(table.hasClass("docker")){
                window.open("<%=basepath%>"+"serverServlet?action=ajaxAddContainerAppendix&id="+containerId);
            }

        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id


    })//table 的点击事件,利用冒泡

    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程

    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程

    })//这是删除的模态框点击了确定键后搜索数据并提交的过程
</script>
<!--表格点击事件-->
</html>